{extend name="/base/base"}
{block name="content"}
    <form class="layui-form layui-form-pane" enctype="multipart/form-data" >
        <input type="hidden" name="id" value="{$detail['id']}">
        <div class="layui-form-item">
            <label class="layui-form-label">标题</label>
            <div class="layui-input-block">
                <input type="text" name="title" value="{$detail['title']}" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">链接地址</label>
            <div class="layui-input-block">
                <input type="text" name="link" value="{$detail['link']}" placeholder="请输入链接" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">上传图片</label>
            <div class="pic-btn">
                <button type="button" class="layui-btn" id="upload">
                    <i class="fa fa-file-image-o mr5"></i> 图片上传
                </button>
            </div>
            <div class="pic-input">
                <input type="text" name="pic_path" value="{$detail['pic_path']}" id="upload_path" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">排序</label>
            <div class="layui-input-inline">
                <input type="text" name="orders" value="{$detail['orders']}" class="layui-input">
            </div>
            <div class="layui-form-mid layui-word-aux">数字越小越靠前</div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="submit">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
{/block}
{block name="js"}
    <script>
        layui.use(['upload','layer','form'], function(){
            var form = layui.form;
            var upload = layui.upload;
            var layer = layui.layer;
            var $ = layui.jquery;
            //执行实例
            upload.render({
                elem: '#upload', //绑定元素
                url: "{:url('/common/update/update')}", //上传接口
                data:{name:'pic','type':'carousel'},
                field:"pic",
                done: function(res){
                    //上传完毕回调
                    if (res.status == 'fail') {
                        layer.msg(res.msg,{ios:2});
                    } else {
                        $('#upload_path').val(res.result.path);
                    }
                },
                error: function(){
                    //请求异常回调
                    layer.msg('上传失败',{ios:2});
                }
            });

            //监听提交
            form.on('submit(submit)', function(data){
                $.ajax({
                    url : "{:url('addHandleCarousel')}",
                    type : "POST",
                    // contentType: "application/json;charset=utf-8", // 上传内容的格式
                    data : data.field,
                    dataType : "json", // 返回的数据格式
                    success : function(data) {
                        if (data.status == 'success') {
                            layer.msg(data.msg, {icon: 1});
                        } else {
                            layer.msg(data.msg, {icon: 2});
                        }
                    },
                    error:function(data){
                        layer.msg(data.msg, {icon: 2});
                    }
                })
                return false;
            });

        });
    </script>
{/block}